<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>carousel模块快速使用</title>
      <link rel="stylesheet" href="../static/lib/layui/css/layui.css">
      <script src="../static/lib/layui/layui.js" charset="utf-8"></script>
</head>
<style>
    #top{
        width: 800px;
        height: 500px;
        margin: 10px auto;
        border: 1px solid black;
    }
    #btn{
        width: 800px;
        height: 300px;
        margin: auto;
        border: 1px solid black;
    }
</style>
<body>
<div class="layui-carousel" id="test1">
  <div carousel-item>
    <div>
        <div id="top1">
        </div>
        <div id="btn1">
        </div>
    </div>
    <div>
         <div id="top2">
        </div>
        <div id="btn2">
        </div>
    </div>
    <div>
         <div id="top3">
        </div>
        <div id="btn3">
        </div>
    </div>
    <div>
         <div id="top4">
        </div>
        <div id="btn4">
        </div>
    </div>
    <div>
         <div id="top5">
        </div>
        <div id="btn5">
        </div>
    </div>
  </div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
<script>
layui.use('carousel', function(){
  var carousel = layui.carousel;
  //建造实例
  carousel.render({
    elem: '#test1'
    ,height: '100vh'
    ,width: '100%' //设置容器宽度
    ,arrow: 'always' //始终显示箭头
    //,anim: 'updown' //切换动画方式
  });
});
</script>
</body>
</html>